<template>
    <div id="main-box">
        <navbar id="header"><div id="nav-header">结算</div></navbar>
        <point id="imgs"></point>
        <div id="content-box">
            <div id="goods-place-box">
                <p>收货地址:</p>
                <button id="btn-one">添加收货地址</button>
                <p>配送方式: 请先选择收货地址</p>
                <p>支付方式: 请先选择配送方式</p>
                <p>商品清单:</p>
                <div class="merchBill">
                    <div><img :src="goods.pic[0]" alt=""></div>
                    <div id="right">
                        <p>[优质] {{goods.goodsname}}</p>
                        <p>原产地:{{goods.goodsarea}} 数量 : 2</p>
                    </div>
                </div>
                <div id="leave-msg">
                    订单留言
                </div>
                <div id="box">
                    <div class="center"><span>使用优惠券></span></div>
                    <p>商品总金额 ： {{goods.goodsprice*2}}</p>
                    <p>运费 : ￥0.00</p>
                    <p>订单可得积分 : {{goods.goodsprice*2}}</p>
                    <span>总金额 : {{goods.goodsprice*2}}</span>
                    <button>提交订单</button>
                </div>
            </div>
        </div>
        <footers></footers>
    </div>
</template>

<script>
import footers from "../components/footers"
import navbar from "../components/navbar"
import point from "../components/point"
export default{
    data:function(){
        return{
            goods:{}
        }
    },
    components: {
        navbar,
        point,
        footers
    },
    mounted () {
        // console.log(this.$route.params.v)
        var params = {
            a:this.$route.params.v
        }
        this.http.post("/api/goodsdetails",params)
        .then(res=>{
            // console.log(res.data.msg)
            this.goods = res.data.msg
        })
    }
}
</script>

<style scoped>
#imgs{
    position: fixed;
    top: 0;
    right: 0;
}
#header{
    width: 100vw;
    background-color: #f2f2f2;
}
#nav-header{
    line-height: 37px;
    width: 60vw;
    text-align: center; 
}
#main-box{
    width: 100vw;
    background-color: #F2F2F2;
}
#content-box{ 
    /*height: 100px;*/
    width: 94vw;
    margin: 0 auto;
    margin-top: 37px;
    /*background-color: #f8f8f8;*/
}
#goods-place-box p{
    font-size: 12px;
    padding-top: 20px;
    margin-left: 10px;
    color: #353d44;
}
#btn-one{
    border: none;
    height: 31px;
    width:94vw;
    border: solid 1px #eda200;
    background-color: #eda200;
    border-radius: 4px;
    font-size: 18px;
    color: white;
}
.merchBill{
    width: 94vw;
    height: 120px;
    background-color: white;
    padding: 10px 10px;
    display: flex;
}
#right p{
    margin: 0;
    margin-left: 20px;
}
img{
    height: 100px;
}
#leave-msg{
    height: 50px;
    width: 94vw;
    /*margin: 0 auto;*/
    margin-top: 20px;
    border: solid 1px  #666;
    font-size: 12px;
    background-color: white;
    color: #353d44;
}
#box{
    width: 96vw;
    height: 200px;
    margin: 0 auto;
}
#box button {
    border: none;
    height: 31px;
    width:94vw;
    border: solid 1px #339933;
    background-color: #339933;
    border-radius: 4px;
    font-size: 18px;
    color: white;
}
#box span{
    font-size: 12px;
}
.center{
    text-align: center;
}
#box p{
    padding: 0;
    margin: 0;
    margin-top: 8px;
}
</style>